﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <script type="text/javascript" src="easyui/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <!-- baidu地图api -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
    <script type="text/javascript">
        var mapSelector = function () {
            var thisobj = this;
            $("#cc .layout-button-right").hide();

            //定义控件
            thisobj.ctl = {
                txtSearch: $("#txtSearch"),
                btnSearch: $("#btnSearch"),
                btnReset: $("#btnReset"),
                aCity: $("#aCity"),
                searchResult: $("#searchResult")
            };

            //定义函数函数
            thisobj._init = function (firstrun, config) {
                if (config) {
                    var search = false;

                    var query = config.query;
                    var city = config.city;
                    if (query && $.trim(query).length > 0) {
                        //搜索
                        thisobj.ctl.txtSearch.val(query);   //设置搜索内容
                        search = true;
                    }
                    if (city && $.trim(city).length > 0) {
                        //设定搜索城市范围
                        thisobj.ctl.aCity.html(city);
                        search = true;
                    }
                    else {
                        //定位当前Ip
                        var myCity = new BMap.LocalCity();
                        myCity.get(function (res) {
                            thisobj.map.centerAndZoom(res.center, res.level);
                            thisobj.ctl.aCity.html(res.name);
                            if (search) {
                                thisobj.ctl.btnSearch.click();
                            }
                        });
                        return;
                    }
                    if (search) {
                        thisobj.ctl.btnSearch.click();
                        return;
                    }
                }

                //第一次open，需要当前地图定位
                if (firstrun) {
                    //清空搜索栏
                    thisobj.ctl.txtSearch.val("");
                    thisobj.ctl.searchResult.empty();
                    //定位当前Ip
                    var myCity = new BMap.LocalCity();
                    myCity.get(function (res) {
                        thisobj.map.centerAndZoom(res.center, res.level);
                        thisobj.ctl.aCity.html(res.name);
                    });
                }

            };

            //工具栏事件
            //搜索
            thisobj.ctl.txtSearch.keyup(function (e) {
                if (e.keyCode == 13) {
                    thisobj.ctl.btnSearch.click();
                }
            });
            thisobj.ctl.btnSearch.click(function () {
                var txt = thisobj.ctl.txtSearch.val();
                txt = $.trim(txt);
                if (txt == "") {
                    $.messager.confirm('Warning', "请填写搜索内容。");
                    thisobj.ctl.txtSearch.focus();
                }
                else {
                    thisobj.map.clearOverlays();
                    var local = new BMap.LocalSearch(thisobj.map, {
                        renderOptions: {
                            map: thisobj.map,
                            panel: "searchResult",
                            selectFirstResult: false
                        },
                        onMarkersSet: function (pois) {
                            //debugger;
                            $.each(pois, function () {
                                var item = this;
                                var marker = item.marker;
                                marker.addEventListener("click", function () {
                                    if (!thisobj._setMarkerClickText(item, thisobj)) {
                                        thisobj.close();
                                    }
                                });
                            });
                        }
                    });
                    local.search(txt);
                }
            });
            //重设
            thisobj.ctl.btnReset.click(function () {
                $.messager.confirm('Confirm', '确认需要重设地图定位？', function (r) {
                    if (r) {
                        thisobj._init();
                    }
                });
            });
            thisobj.ctl.aCity.click(function (e) {
                $("#city_container").dialog("open");
                e.preventDefault();
            });


            thisobj._firstRun = true;

            thisobj.map = new BMap.Map("mapcc");            // 创建Map实例
            //thisobj.map.addControl(new BMap.NavigationControl());
            thisobj.map.enableScrollWheelZoom();
            //默认事件
            thisobj._setMarkerClickText = function (pos, ms) {
                //debugger;
                alert("你选择了:" + pos.title + " " + pos.address);
            };
            // 创建CityList对象，并放在city_container节点内
            var myCl = new BMapLib.CityList({ "container": "city_container", "map": thisobj.map });

            // 给城市点击时，添加切换地图视野的操作
            myCl.addEventListener("cityclick", function (e) {
                // 由于此时传入了map对象，所以点击的时候会自动帮助地图定位，不需要下面的地图视野切换语句
                // map.centerAndZoom(e.center, e.level);
                thisobj.ctl.aCity.html(e.name);
                //清空搜索栏
                thisobj.ctl.txtSearch.val("");
                thisobj.ctl.searchResult.empty();
                thisobj.map.clearOverlays();
                $("#city_container").dialog('close');
            });
        };
        mapSelector.prototype.open = function (config) {
            var thisobj = this;

            thisobj._init(thisobj._firstRun, config);

            //打开modal
            $('#win').window('open');
            thisobj._firstRun = false;
        };
        mapSelector.prototype.close = function () {
            var thisobj = this;
            $('#win').window('close');
        };
        mapSelector.prototype.reset = function () {
            var thisobj = this;
            thisobj._init();
        };
        mapSelector.prototype.setMarkerClickText = function (handler) {
            var thisobj = this;
            thisobj._setMarkerClickText = handler;
        }

        $(function () {
            $('#win').window({
                collapsible: false,
                minimizable: false,
                maximizable: false,
                modal: true
            }).window('close');

            $("#city_container").dialog({
                modal: true
            }).dialog('close');

            var ms = new mapSelector();
            ms.setMarkerClickText(function (pos, ms) {
                $("#txt").val(pos.title + " " + pos.address)
                    .data("pos", pos);
            });

            $("#btnLocation").click(function () {
                var pos = $("#txt").data("pos");
                ms.open({
                    query: $("#txt").val(),
                    city: (pos ? pos.city : null)
                });
            });

            //测试
            /*
            $("#txt").val("白云机场").data("pos", {
            city:"广州"
            });*/
        });
    </script>
</head>
<body>
    <input id="txt" /><input type="button" id="btnLocation" value="定位" />
    <div id="win" iconcls="icon-save" title="地图定位器">
        <div id="cc" class="easyui-layout" style="width: 800px; height: 500px;">
            <div region="north" style="height: 50px; padding: 5px;">
                <table style="width: 100%">
                    <tr>
                        <td>
                            <input type="text" id="txtSearch" />
                            <input type="button" value="搜索" id="btnSearch" />
                            <input type="button" value="重设定位" id="btnReset" />
                        </td>
                        <td style="text-align: right">
                            当前选择城市：<a id="aCity" href="#"></a>
                            <div style="width: 600px; height: 300px; margin-bottom: 20px; border: 1px solid gray;
                                overflow-y: auto;" id="city_container" title="城市列表">
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div region="east" title="搜索结果" style="width: 200px; padding: 1px">
                <div id="searchResult">
                </div>
            </div>
            <div region="center" title="地图">
                <div id="mapcc" style="width: 597px; height: 418px;">
                </div>
            </div>
        </div>
    </div>
</body>
</html>
